// 组件变量
// 名称可按如下规则定义：
// <component>-[type]-[attrtype]-<attr>-[status]

// component:组件名，如button，
// type: 组件类型，如 button 的次要按钮（line）
// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
// attr: 属性名称，如color、height、radius等
// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等

// 如：@button-line-bg-color-hover
// 如：@button-line-height-s

@import "../../_variables.less";

// 颜色
@menu-theme-light: #fff;
@menu-theme-dark: @gray-color-13;
@menu-theme-primary: @brand-color;

@menu-item-color--light: @font-gray-2;
@menu-item-color--dark: rgba(255, 255, 255, .55);
@menu-item-active-bg--light: @gray-color-2;
@menu-item-active-bg--dark: @gray-color-9;
@menu-item-active-color--light: @font-gray-1;
@menu-item-active-color--dark: @text-color-anti;
@menu-item-hover-color--light: @font-gray-2;
@menu-item-hover-color--dark: rgba(255, 255, 255, .55);
@menu-item-hover-bg--light: @gray-color-1;
@menu-item-hover-bg--dark: @gray-color-10;
@menu-item-animation-bg--light: @gray-color-3;
@menu-item-animation-bg--dark: @gray-color-11;

@head-menu-bg--dark: @gray-color-13;

@menu-item-disabled-color: @font-gray-4;
@menu-item-disabled-color-dark: @font-white-4;

@menu-menu-group-title-color: @font-gray-3;
@menu-menu-group-title-color--dark: @font-white-3;
@menu-group-title-bg--collapse: @gray-color-3;
@menu-group-title-bg--collapse--dark: @gray-color-10;

@menu-light-active-color: @font-gray-1;
@menu-dark-active-color: @text-color-anti;

@menu-light-active-bg: @gray-color-2;
@menu-light-hover-bg: @gray-color-1;
@menu-dark-active-bg: @gray-color-9;
@menu-dark-hover-bg: @gray-color-10;

@submenu-item-color: @font-gray-2;
@submenu-item-active-color: @brand-color-8;
@submenu-dark-item-active-color: #4582E6;

@menu-border-color: #f0f0f0;
@menu-border-color--dark: @gray-color-10;

@menu-popup-bg-color: #fff;
@menu-popup-item-color: @font-gray-1;
@menu-popup-item-hover-bg: @gray-color-1;
@menu-popup-item-active-color: @brand-color-8;
@menu-popup-item-active-bg: #ECF2FE;
@head-menu-popup-item-color: @font-gray-2;
@head-menu-popup-item-active-color: @font-gray-1;
@head-menu-popup-item-active-bg: @gray-color-2;

@menu-head-item-color: @font-gray-2;

@menu-operations-color: @font-gray-1;

// head menu
@head-menu-item-width: 104px;
@head-menu-item-height: 40px;
@head-menu-submenu-border-color: @gray-color-3;

// default menu
@default-menu-width: 232px;
@default-menu-collapse-width: 64px;
@default-menu-active-color: @brand-color-8;
@default-menu-item-height: 36px;

// popup
@popup-item-padding-left: 16px;

// 边距
@menu-padding-horizontal-default: @spacer;
@menu-padding-horizontal-high: (@spacer * 1.5);

@textarea-limited-padding: (@spacer * 4);

// 高度
@menu-height-default: (@spacer * 4); // low
@menu-height-high: (@spacer * 5);

// z-index
@menu-outer-zindex: 1000;

// 字号
@menu-fontsize: @font-size-base;
@menu-extra-fontsize: @font-size-s;

// box-shadow
@menu-head-shadow: 0 8px 10px -5px rgba(0, 0, 0, .08), 0 16px 24px 2px rgba(0, 0, 0, .04), 0 6px 30px 5px rgba(0, 0, 0, .05);
@menu-head-submenu-shadow: inset 0 -1px 0 0 #eee;
@menu-default-shadow: 0 5px 5px -3px rgba(0, 0, 0, .1),0 8px 10px 1px rgba(0, 0, 0, .06), 0 3px 14px 6px rgba(0, 0, 0, .05);

// transition
@fade-linear-transition: opacity 200ms linear;
@md-fade-transition: transform 300ms cubic-bezier(.23, 1, .32, 1), opacity 300ms cubic-bezier(.23, 1, .32, 1);
